<template>
  <div class="layout-header">
    <!--  -->
    <div class="header-logo">
      <img src="../assets/header.jpg" alt="" srcset="" />
    </div>
    <!--  -->
    <div class="header-menu">
      <div class="menu-item" :class="{ active: activeMenu === item.name }" v-for="item in menu" :key="item.name"
        @click="changeMenu(item)">
        <img src="../assets/综合管理.png" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <!--  -->
    <div class="header-user">
      <el-dropdown @command="handleClickMenu">
        <div class="box">
          <img :src="require(`@/assets/admin.jpg`)" alt="" srcset="" />
          <div class="user">
            <div class="userName">
              {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <div class="">乐山电力股份有限公司 营销服务中心</div>
          </div>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="{ name: '个人中心', code: 'userCenter' }">个人中心</el-dropdown-item>
          <el-dropdown-item divided :command="{ name: '注销登录', code: 'logout' }">注销登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--  -->
    <div class="header-handle">
      <div class="handle-item">
        <el-badge :value="12" class="item">
          <img src="../assets/待办.png" alt="" />
        </el-badge>
        <span class="handle-item-text">待办</span>
      </div>
      <div class="handle-item">
        <el-badge :value="6" class="item">
          <img src="../assets/消息.png" alt="" />
        </el-badge>
        <span class="handle-item-text">消息</span>
      </div>
      <div class="handle-item">
        <img src="../assets/帮助.png" alt="" />
        <span class="handle-item-text">帮助</span>
      </div>
      <div class="handle-item">
        <img src="../assets/退出.png" alt="" />
        <span class="handle-item-text">退出</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
const commantMap = new Map([
  ['userCenter', self => self.$router.push({ name: 'User' })],
  [
    'logout',
    self => {
      self.Cookies.remove('auth');
      self.$router.replace({ name: 'LoginIndex' });
    },
  ],
]);
import { menuRouter, menuRouterDL } from "../router"
export default {
  data() {
    return {
      menu: [
        {
          name: '综合',
          microApp: 'zh',
          menu: menuRouter
        },
        {
          name: '电力',
          microApp: 'dl',
          menu: menuRouterDL
        },
        {
          name: '燃气',
          microApp: 'rq',
        },
        {
          name: '水务',
          microApp: 'sw',
        },
        {
          name: '设置',
          microApp: 'sz',
        },
      ],
      activeMenu: '综合'
    };
  },
  computed: {
    ...mapState({
      user: state => state.user,
    }),
  },
  methods: {
    handleClickMenu(command) {
      const { code } = command;
      const fn = commantMap.get(code);
      fn(this);
    },
    changeMenu(item) {
      this.$store.commit('changeMenu', item.menu)
      this.activeMenu = item.name
    }
  },
};
</script>

<style lang="less" scoped>
.layout-header {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  padding: 0 1em;
}

.header-logo {
  display: flex;
  color: #ffffff;

  img {
    height: 60px;
  }
}

.header-menu {
  height: 100%;
  margin-left: 40px;
  color: #fff;
  flex: 1;
  display: flex;
  justify-content: center;

  .menu-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70px;
    font-size: 14px;
    gap: 2px;

    img {
      width: 24px;
    }

    &.active {
      background: rgba(0, 65, 121, 1);
    }

    &:hover {
      cursor: pointer;
      background: rgba(0, 65, 121, 1);
    }
  }
}

.header-user {
  .box {
    display: flex;
    color: #e3b4b4;
    margin-right: 40px;

    img {
      height: 50px;
      border-radius: 50%;
      margin: 0 1em;
    }

    .user {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }

}

.header-handle {
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  font-weight: bolder;

  .handle-item {
    margin-right: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;

    .handle-item-text {
      margin-left: 6px;
    }
  }

  img {
    width: 20px;
  }

  /deep/.el-badge {
    .el-badge__content {
      border: none;
      padding: 0 2px;
      background: red;
      font-size: 12px;
      font-weight: 400;
    }
  }
}
</style>
